<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
<title>朋友圈语音</title>
<link href="{MODULE_URL}template/mobile/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="{MODULE_URL}template/mobile/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="{MODULE_URL}template/mobile/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="{MODULE_URL}template/mobile/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{MODULE_URL}template/mobile/js/jquery-1.11.0.min.js">
</script>
</script>
<script type="text/javascript" src="{MODULE_URL}template/mobile/js/jquery-scrollto.js">
</script>
<script type="text/javascript" src="{MODULE_URL}template/mobile/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid page-container">
<div class="row">
<div class="col-xs-12 highcol hdmain">
<h1>发送一条朋友圈语音</h1>
<div class="cibox">
<div class="ico-rec-start"><img src="{MODULE_URL}template/mobile/images/2781214_5_99139996d4_o.png" alt="" /></div>
<div class="ico-rec-recording hide"><img class="rc-1 hide" src="{MODULE_URL}template/mobile/images/2781334_5_2a4e35b4e8_o.png" alt="" /><!-- 2 -->
 <img class="rc-2 hide" src="{MODULE_URL}template/mobile/images/2781333_5_e3200f4d19_o.png" alt="" /><!-- 1 -->
 <img class="rc-3 hide" src="{MODULE_URL}template/mobile/images/2781336_5_5e066fdb53_o.png" alt="" /><!-- 4 -->
 <img class="rc-4 hide" src="{MODULE_URL}template/mobile/images/2781335_5_8991dbeddd_o.png" alt="" /><!-- 3 -->
 <img class="rc-5 hide" src="{MODULE_URL}template/mobile/images/2781337_5_cf4681741c_o.png" alt="" /></div>
<div class="ico-rec-play hide" onclick="playVoiceByUser();return false;"><img src="{MODULE_URL}template/mobile/images/2781215_5_7fe06370f6_o.png" alt="" /></div>
<div class="ico-rec-playing hide"><img class="pi-1 hide" src="{MODULE_URL}template/mobile/images/2781219_5_2905ad457a_o.png" alt="" /> <img class="pi-2 hide" src="{MODULE_URL}template/mobile/images/2781220_5_001114eff2_o.png" alt="" /> <img class="pi-3 hide" src="{MODULE_URL}template/mobile/images/2781221_5_cacc5ecf9d_o.png" alt="" /></div>
<div class="voice-time-bar"><span class="voice-time">0</span>s</div>
</div>
<div class="btnbox">
<p id="tip">正在初始化，稍等一下</p>
<div class="btn-rec-start hide"><a class="hdbtn hdbtn-1" href="javascript:;">开始录音</a></div>
<div class="btn-rec-stop hide"><a class="hdbtn hdbtn-2" href="javascript:;" onclick="stopRecord();return false;">停止录音</a></div>
<div class="btn-rec-restart hide"><a class="hdbtn hdbtn-1" href="javascript:;" onclick="restartRecord();return false;">重新录音</a></div>
<div class="btn-rec-preshare hide"><a class="hdbtn hdbtn-1" href="javascript:;" onclick="return false;">正在保存语音...</a></div>
<div class="btn-rec-share hide"><a class="hdbtn hdbtn-1" href="javascript:;" onclick="showShareGuide();return false;">分享到朋友圈</a></div>
</div>
<div class="overlaybg" onclick="hdOverlayBgClicked()"><img src="{MODULE_URL}template/mobile/images/cleardot.gif" alt="" /></div>
<div class="shareGuide" onclick="hdOverlayBgClicked()">
<img src="{MODULE_URL}template/mobile/images/2782482_5_e24b6d811e_o.png" alt="" /></div>
</div>
</div>
</div>
<script type="text/javascript">
 var voice_record_time=0;
 var voice_record_start = 0;
 function switchIconTo(s){
   var ss=[ "start" , "recording", "play" , "playing"];
   var i=0;
   for(;i<ss.length;i++){
     $('.ico-rec-'+ss[i]).addClass('hide');
     $('.ico-rec-'+s).removeClass('hide');
   }
 }

 function switchBtnTo(bs){
   var ss=[ "start" , "stop" ,  "restart","preshare","share"];
   var i=0,j=0;
   for(;i<ss.length;i++){
     $('.btn-rec-'+ss[i]).addClass('hide');
     var show=false;
     for(j=0;j<bs.length;j++){
       if(bs[j] == ss[i]){
         show=true;
         break;
       }
     }
     if(show){
       $('.btn-rec-'+ss[i]).removeClass('hide');
     }
   }
 }

 function onUploadDone(serverId){
   // 激活下一步按钮

   // 保存serverId到服务器
   // $.ajax({
   //   url:"{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('saverecord',array(),1);}",
   //   //dateType:"jsonp",
   //   type:"POST",
   //   data:{serverId:serverId,timeLength:voice_record_time}
   // }).done(function(data){
   //   if(data && data.ret === 0){
   //     var serverId = data.serverId;
// alert(serverId);
       // $('.btn-next').show();

       wxShareDataArray[isAndroid ? 3 : 2][3] = "{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('index',array(),1);}" +'&serverId=' + serverId+'&time=' + voice_record_time;
       changeWeixinShareData(isAndroid ? 3 : 2);


       //知道上传成功
       $('.btn-rec-share .hdbtn').addClass('hdbtn-2');
       $('.btn-rec-share .hdbtn').removeClass('hdbtn-1');


       switchBtnTo(["restart","share"]);
       
   //   }else{
   //     //失败
   //     alert("语音保存失败，请重新录制!");
   //   }
   // }).complete(function(){

   //   //alert("complete");

   // });
   
 }

 var play_time_ti;
 var is_playing=false;
 function playVoice(id){
   is_playing=true;
   switchIconTo('playing');

   /*
   播放结束事件无法捕捉
   wx.onVoicePlayEnd({
     success: function (res) {
       alert("play end.");
       var localId = res.localId; // 返回音频的本地ID

       switchIconTo('play');
     }
   });
   */

   play_time_ti = setInterval(function(){
     var tt = $('.voice-time-bar .voice-time');
     var ss = tt.text() *1;
     tt.text(ss>1 ? ss-1:0);
   },1000);
   
   setTimeout(function(){
     is_playing=false;
     switchIconTo('play');

     $('.voice-time-bar .voice-time').text(voice_record_time*1);
     
     if(play_time_ti){
       clearInterval(play_time_ti);
     }
     
   },voice_record_time*1000);
   
   wx.playVoice({
     localId: id// 需要播放的音频的本地ID，由stopRecord接口获得
   });
   
 }

 function playVoiceByUser(){
   if(is_playing) return;

   playVoice(last_voice_localId);
 }
 function uploadVoice(localId){
   wx.uploadVoice({
     localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
     isShowProgressTips: 1, // 默认为1，显示进度提示
     success: function (res) {
       var serverId = res.serverId; // 返回音频的服务器端ID
       //alert("upload done: " + serverId);
       onUploadDone(serverId);
     },
     fail:function() {
       alert('上传失败');
       $('.btn-rec-preshare').addClass('hide');
     }
   });
 }

 var last_voice_localId;
 function onRecordDone(localId){

   voice_record_time = Math.ceil(((new Date()).getTime() - voice_record_start) / 1000);

   wxShareDataArray[isAndroid ? 3 : 2][1] = voice_record_time*1 + "\"";
   
   switchIconTo('play');
   switchBtnTo(["restart","preshare"]);

   //还不知道上传是否成功
   $('.btn-rec-share .hdbtn').removeClass('hdbtn-2');
   $('.btn-rec-share .hdbtn').addClass('hdbtn-1');


   $('.voice-time-bar .voice-time').text(voice_record_time*1);
   $('.voice-time-bar').show();
   
   last_voice_localId = localId;
   
   setTimeout(function(){
     uploadVoice(localId);
   },1000);

   playVoice(localId);
   
 }

 var isRecording = false;
 function startRecord(){

   if(isRecording) return;
   isRecording=true;

   
   
   wx.onVoiceRecordEnd({
     // 录音时间超过一分钟没有停止的时候会执行 complete 回调
     complete: function (res) {
       var localId = res.localId;
       //alert("done: "+localId);

       isRecording=false;
       onRecordDone(localId);
     }
   });

   $('.voice-time-bar').hide();
   switchIconTo('recording');
   switchBtnTo(["stop"]);

   voice_record_time=0;
   voice_record_start = (new Date()).getTime();

   wx.startRecord({
     success:function(){
       isRecording=false;
       voice_record_start = (new Date()).getTime();
     },
     cancel:function(){
       isRecording=false;
       
       switchBtnTo(["start"]);
       switchIconTo('start');
     }
   });
   
 }


 function stopRecord(){
   isRecording=false;
   
   wx.stopRecord({
     success: function (res) {
       var localId = res.localId;
       //alert("stop: "+localId);
       onRecordDone(localId);
     }
   });
 }

 function playRecord(){
   playVoice(last_voice_localId);
 }

 function restartRecord(){
   startRecord();
 }

 $(function(){
   // $('.btn-rec-start .hdbtn').on('touchstart',function(){
   //   startRecord();
   // });
   $('.btn-rec-start .hdbtn').on('click',function(){
     startRecord();
   });
 });


  function hdOverlayBgClicked(){
   $('.shareGuide').hide();
   $('.afterShareGuide').hide();
   $('.overlaybg').hide();
 }

 function showShareGuide(){

   if(!$('.btn-rec-share .hdbtn').hasClass('hdbtn-2')){
     return;
   }
   
   $('.afterShareGuide').hide();
   $('.shareGuide').show();
   $('.overlaybg').show();

   $('.shareGuide').ScrollTo();
 }

 var piArr=[];
 var piPos=0;
 $(function(){
   if(piArr.length <1){
     piArr[0] = $('.pi-1');
     piArr[1] = $('.pi-2');
     piArr[2] = $('.pi-3');
   }

   setInterval(function(){
     var i=0;
     for(;i<3;i++){
       if(i == piPos){
         piArr[i].removeClass('hide');
       }else{
         piArr[i].addClass('hide');
       }
     }

     piPos++;
     if(piPos>=3){
       piPos = (piPos % 3);
     }
   },500);
   
 });


 var riArr=[];
 var riPos=0;
 $(function(){
   if(riArr.length <1){
     riArr[0] = $('.rc-1');
     riArr[1] = $('.rc-2');
     riArr[2] = $('.rc-3');
     riArr[3] = $('.rc-4');
     riArr[4] = $('.rc-5');
   }

   setInterval(function(){
     var i=0;
     for(;i<5;i++){
       if(i == riPos){
         riArr[i].removeClass('hide');
       }else{
         riArr[i].addClass('hide');
       }
     }

     riPos++;
     if(riPos>=5){
       riPos = (riPos % 5);
     }
   },300);
   
 });
 
 /* fix style */
 function _fixLayoutStyle(){
   var w = $(window).width();
   var h = $(window).height();
   if(w>500) w=500;
   var ptdPadding = Math.floor(w * 5 / 320);
   var ptbH = Math.floor(w * 290 /320);

   $(document.body).append('<sty'+'le>'
                           + '.page-container {min-height:'+h+'px;background-position:50% 90%; }'
                           + '.overlaybg {min-height:'+h+'px;}'
                           + '.afterShareGuide {min-height:'+h+'px;}'
                           +'<\/sty'+'le>');
 }
 $(_fixLayoutStyle);
 $(window).on("load",_fixLayoutStyle);

</script>
<script type="text/javascript">
 var isAndroid = {$isAndroid};
</script><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript">
</script><script type="text/javascript">
 var wxShareDataArray = [["\u670b\u53cb\u5708\u4e5f\u80fd\u53d1\u8bed\u97f3\u4e86\uff01","10\"","{MODULE_URL}template/mobile/images/share_icon.jpg","{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('index',array(),1);}"],["\u670b\u53cb\u5708\u4e5f\u80fd\u53d1\u8bed\u97f3\u4e86\uff01","10\"","{MODULE_URL}template/mobile/images/share_icon.png","{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('index',array(),1);}"],["\u670b\u53cb\u5708\u4e5f\u80fd\u53d1\u8bed\u97f3\u4e86\uff01","10\"","{MODULE_URL}template/mobile/images/share_icon.jpg","{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('index',array(),1);}"],["\u670b\u53cb\u5708\u4e5f\u80fd\u53d1\u8bed\u97f3\u4e86\uff01","10\"","{MODULE_URL}template/mobile/images/share_icon.png","{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('index',array(),1);}"]];
 
  $(function(){
 wx.config({
   debug: false,
   appId: "{$_W['account']['jssdkconfig']['appId']}",
   timestamp: {$_W['account']['jssdkconfig']['timestamp']},
   nonceStr: "{$_W['account']['jssdkconfig']['nonceStr']}", 
   signature: "{$_W['account']['jssdkconfig']['signature']}",
   jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","startRecord","stopRecord","onVoiceRecordEnd","playVoice","pauseVoice","stopVoice","onVoicePlayEnd","uploadVoice","downloadVoice"] 
 });
 wx.ready(function(res){
   switchBtnTo(['start']);
   changeWeixinShareData(isAndroid ? 1 : 0);
   $('#tip').hide();
 });
 wx.error(function(res){
   //console.log(res);
   //alert(res);
 });
 });

 function changeWeixinShareData(index){

     wx.onMenuShareTimeline({
     title: wxShareDataArray[index][1],
     link: wxShareDataArray[index][3],
     imgUrl: wxShareDataArray[index][2],
     success: function () {
       // 用户确认分享后执行的回调函数
     },
     cancel: function () {
       // 用户取消分享后执行的回调函数
     }
     });

     wx.onMenuShareAppMessage({
     title: wxShareDataArray[index][0],
     desc: wxShareDataArray[index][1],
     link: wxShareDataArray[index][3],
     imgUrl: wxShareDataArray[index][2],
     //type: '', // 分享类型,music、video或link，不填默认为link
     //dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
     success: function () {
       // 用户确认分享后执行的回调函数
     },
     cancel: function () {
       // 用户取消分享后执行的回调函数
     }
     });
 }
</script>
</body>
</html>